<template>
  <Layout desc="封装一个echarts hook">
    <div class="flex flex-col items-center w-180">
      <div ref="chartRef" class="w-full h-120"></div>

      <div>
        <el-button @click="() => downloadChartImage()" type="warning"
          >下载图片</el-button
        >
        <el-button @click="onClick" type="primary">更新数据</el-button>
      </div>
    </div>
  </Layout>
</template>

<script setup lang="ts">
import { useECharts } from '@/hooks/useECharts'
import { LineOptionStrategy } from './LineOptionStrategy'

const getRandom = (start: number, end: number, count: number) => {
  const arr = []
  for (let i = 0; i < count; i++) {
    arr.push(Math.floor(Math.random() * (end - start + 1) + start))
  }
  return arr
}

const chartRef = ref<HTMLDivElement | null>(null)

const { options, downloadChartImage } = useECharts(
  chartRef,
  new LineOptionStrategy().getOptions()
)

const onClick = () => {
  ;(options.series as any[])[0].data = getRandom(1, 15, 7)
}
</script>

<style scoped lang="scss"></style>
